<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新手引导</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div class="container">
    <header>
      <div class="logo" guide-logo></div>
      <h4>xxx管理后台</h4>
      <div class="tools" guide-tools>
        <div guide-msg><img src="./images/msg.png" alt="" ></div>
        <img src="./images/setting.png" alt="">
      </div>
    </header>

    <div class="box">
      <!-- 侧边菜单 -->
      <aside></aside>
      <!-- 内容区 -->
      <main>
        <div class="card" card1>
          <p>轻松上手xxx <span>4步带你玩转管理后台</span></p>
          <div class="steps">
            <div class="step">
              <img src="./images/tick.png" alt="" width="20px" height="20px">
              <div>
                <p>完善组织架构</p>
                <p>导入或邀请成员</p>
              </div>
              <img src="./images/arrow-right.png" alt="" width="10px" height="10px">
            </div>
            <div class="step">
              <img src="./images/tick.png" alt="" width="20px" height="20px">
              <div>
                <p>探索企业应用</p>
                <p>灵活管理各项功能</p>
              </div>
              <img src="./images/arrow-right.png" alt="" width="10px" height="10px">
            </div>
            <div class="step">
              <img src="./images/tick.png" alt="" width="20px">
              <div>
                <p>分配管理员权限</p>
                <p>与同伴系统管理企业</p>
              </div>
              <img src="./images/arrow-right.png" alt="" width="10px">
            </div>
            <div class="step">
              <img src="./images/tick.png" alt="" width="20px">
              <div>
                <p>更多进阶操作</p>
                <p>快速了解全局功能</p>
              </div>
              <img src="./images/arrow-right.png" alt="" width="10px">
            </div>
          </div>
        </div>

        <div class="waterfall">
          <div class="card" card2 guide-enterprise>
            <div class="flex" >
              <div class="flex-center" style="width: 30px;height: 30px;border-radius: 4px;background: #000;color: #fff;">百</div>
              <div style="margin: 0 6px;">
                <div class="flex">
                  <h6 style="margin: 0;">企业名</h6>
                  <div style="width: fit-content;padding: 2px 4px;border-radius: 2px;font-size: 12px;background: #ccc;transform: scale(.6);">未认证</div>
                </div>
                <p style="font-size: 12px;color: #8b8c8e;">认证立享群成员/云空间/参会人/邮箱扩容</p>
              </div>
            </div>

            <div class="card2-data flex">
              <div>
                <span key>组织总人数</span>
                <span val>13</span>
              </div>
              <div>
                <span key>未激活人数</span>
                <span val>11</span>
              </div>
              <div>
                <span key>部门数</span>
                <span val>10</span>
              </div>
              <div>
                <span key>组织管理员</span>
                <span val>1</span>
              </div>
              <div>
                <span key>子管理员</span>
                <span val>0</span>
              </div>
            </div>

            <div class="card2-steps flex-between">
              <div>
                <img src="./images/person.png" alt="" width="16px">
                添加成员
              </div>
              <div>
                <img src="./images/person.png" alt="" width="16px">
                邀请加入
              </div>
              <div>
                <img src="./images/person.png" alt="" width="16px">
                管理员权限
              </div>
            </div>
            
          </div>
  
          <div class="card" card3 guide-usedata>
            <div class="flex-between" style="margin-bottom: 10px;">
              <h6>功能使用情况</h6>
              <div class="change" guide-end>
                <img src="./images/change2.png" alt="" width="30px">
                <ol>
                  <li>web端</li>
                  <li>app端</li>
                  <li>小程序端</li>
                </ol>
              </div>
            </div>
            <div class="card2-data flex">
              <div>
                <span key>昨日活跃人数</span>
                <span val>0</span>
              </div>
              <div>
                <span key>昨日活跃率</span>
                <span val>0.00%</span>
              </div>
            </div>
            <p style="font-weight: bold;font-size: 13px;margin-top: 4px;">使用人数趋势</p>
            <img src="./images/chart.png" alt="" width="100%">
          </div>

          <div class="card" card4 guide-equity>
            <h6>权益数据</h6>

            <div class="card4-data flex">
              <div>
                <span key>云文档存储空间</span>
                <span val>0.02GB</span>
                <span>总量 200.00 GB</span>
              </div>
              <div>
                <span key>短信/电话加急</span>
                <span val>0条</span>
                <span>总量 110条</span>
              </div>
              <div>
                <span key>邮件存储空间</span>
                <span val>0.00GB</span>
                <span>总量 200.00 GB</span>
              </div>
            </div>
            <div class="flex-between" style="padding: 12px;margin-top: 32px;width: 100%;background: #e1eaff;">
              <div class="flex">
                <div class="flex-center" style="padding: 0 4px;margin-right: 6px;background: #3370ff;color: #fff;">标准版 E3</div>
                <span>升级版本，享更多专享权益及服务</span>
              </div>
              
              <div style="color: #527ee6;">联系专属客服</div>
            </div>
          </div>
  
          <div class="card" card5 guide-ability>
            <h6>功能管理</h6>
            
            <div class="card5-list">
              <div>
                <img src="./images/func.png" alt="" width="30px">
                <div class="info">
                  <span>功能名称</span>
                  <span>这里是一段功能描述</span>
                </div>
                <span>配置</span>
              </div>
              <div>
                <img src="./images/func.png" alt="" width="30px">
                <div class="info">
                  <span>功能名称</span>
                  <span>这里是一段功能描述</span>
                </div>
                <span>配置</span>
              </div>
              <div>
                <img src="./images/func.png" alt="" width="30px">
                <div class="info">
                  <span>功能名称</span>
                  <span>这里是一段功能描述</span>
                </div>
                <span>配置</span>
              </div>
              <div>
                <img src="./images/func.png" alt="" width="30px">
                <div class="info">
                  <span>功能名称</span>
                  <span>这里是一段功能描述</span>
                </div>
                <span>配置</span>
              </div>
              <div>
                <img src="./images/func.png" alt="" width="30px">
                <div class="info">
                  <span>功能名称</span>
                  <span>这里是一段功能描述</span>
                </div>
                <span>配置</span>
              </div>
              <div>
                <img src="./images/func.png" alt="" width="30px">
                <div class="info">
                  <span>功能名称</span>
                  <span>这里是一段功能描述</span>
                </div>
                <span>配置</span>
              </div>
              <div>
                <img src="./images/func.png" alt="" width="30px">
                <div class="info">
                  <span>功能名称</span>
                  <span>这里是一段功能描述</span>
                </div>
                <span>配置</span>
              </div>
              <div>
                <img src="./images/func.png" alt="" width="30px">
                <div class="info">
                  <span>功能名称</span>
                  <span>这里是一段功能描述</span>
                </div>
                <span>配置</span>
              </div>
              <div>
                <img src="./images/func.png" alt="" width="30px">
                <div class="info">
                  <span>功能名称</span>
                  <span>这里是一段功能描述</span>
                </div>
                <span>配置</span>
              </div>
            </div>

          </div>
        </div>

      </main>
    </div>
  </div>

  <script src="./js/index.js"></script>
  <script src="./js/answer.js"></script>
</body>

</html>